<template>
    <div id="app">

        <!--主要内容-->
        <div class='mainContent'>
            <!--左侧导航-->
            <div class='leftNav'>
                <ul>
                    <li class='selected'>资料修改</li>
                    <li>作品信息</li>
                    <li>修改密码</li>
                </ul>
            </div>

            <!--右侧内容-->
            <div class='rightContent'>
                <!-- 内容编辑 -->
                <div class='show edit'>
                    <div name='editUser' action="" method="post">
                        <table>

                            <tr>
                                <td>电话号码：</td>
                                <td><input type='text' class='text' name='proName' placeholder="请输入你的电话号码" v-model="phone"></td>
                                <td></td>
                            </tr>

                            <tr>
                                <td>系别：</td>
                                <td><input type='text' class='text' name='proName' placeholder="请输入你所在的系别" v-model="depart">
                                </td>
                                <td></td>
                            </tr>

                            <tr>
                                <td>专业：</td>
                                <td><input type='text' class='text' name='proAuthor' placeholder="请输入你所学的专业" v-model="major"></td>
                                <td></td>
                            </tr>

                            <tr>
                                <td>个人签名：</td>
                                <td>
                                    <span style="vertical-align:99px"></span>
                                    <textarea type='textarea' class='text' rows="5" cols="35" name='proIntro' style="resize:none" placeholder="请输入你的个性签名" v-model="intro"></textarea>
                                </td>
                                <td></td>
                            </tr>




                            <tr>
                                <td></td>
                                <td>
                                    <input type="button" class="editSubmit" value='提交' @click="changeEdit" />
                                </td>
                            </tr>

                        </table>
                        <h4>{{warningEdit}}</h4>
                    </div>
                </div>

                <!-- 作品信息展示 -->
                <div class='show productShow'>

                    <!-- <span class='noPro'>你暂时没有作品!</span> -->
                    
                   
                    <figure v-for="item in pro">
						<strong class="title">{{item.title}}</strong>
						<span class="author">{{item.author}}</span>
						<img class='showImg' v-bind:src="getCoverUrl(item.coverImg_url)" alt="" @click='godetail(item._id)'>
						<figcaption>
							<div class="info">
								<p class='sign'>
									<a href="javascript:" class="icon siIcon"></a><span>{{item.sign}}</span></p>
								<p class='like'>
									<a href="javascript:" class="icon liIcon"></a><span>{{item.likes.length}}</span></p>
								<p class='star'>
									<a href="javascript:" class="icon stIcon"></a><span>{{getstar(item.stars)}}</span></p>
							</div>
                                <div class='changeBtn'>
                                        <a class='proEdit' @click='goedit(item._id)'>修改</a>
                                        <a class='deleteBtn'>删除</a>
                                </div>
                            </figcaption>
                            <div class='state'>

                                <p v-if="item.status==3" style="color:red">理由：{{item.fail_reason}}</p>
                                <p v-if="item.status==1" style="color:blue">正在审核</p>
                                <p v-if="item.status==2" style="color:green">已发布</p>
                            </div>
					</figure>



                </div>

                <!-- 修改密码 -->
                <div class='show editPwd'>
                    <div name='changePwd' action="" method="post">
                        <table class="pwdTable">

                            <tr>
                                <td>旧密码：</td>
                                <td><input type='password' class='oldPwd' name='userOldPwd' placeholder="请输入原来的密码" v-model="oldPwd"></td>

                            </tr>

                            <tr>
                                <td>新密码：</td>
                                <td><input type='password' class='newPwd' name='userNewPwd' placeholder="请输入新的密码" v-model="newPwd">
                                </td>

                            </tr>

                            <tr>
                                <td>确认密码：</td>
                                <td><input type='password' class='reNewPwd' name='userReNewPwd' placeholder="请验证新的密码" v-model="confirmPwd"></td>

                            </tr>


                            <tr>
                                <td></td>
                                <td>
                                    <input type="button" class="editSubmit" value='提交' @click="changePwd" />
                                </td>
                            </tr>

                        </table>
                        <h4>{{warningPwd}}</h4>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import $ from "jquery";
    export default {
        name: 'footer',
        created() {
            require('../../assets/js/user.js')($);
            this.$store.dispatch({
                type: "getAndDelMethod",
                method: "get",
                url: "/api/user/" + this.$store.state.userInfo._id,
                callback: (result) => {
                    console.log(result)
                    this.name = result.body.data.name;
                    this.phone = result.body.data.phone;
                    this.depart = result.body.data.depart;
                    this.major = result.body.data.major;
                    this.intro = result.body.data.intro;
                    this.pro = result.body.data.pro;
                    
                }
            })

        
           

        },
        data() {
            return {
                oldPwd: "",
                newPwd: "",
                confirmPwd: "",
                phone: "",
                depart: "",
                major: "",
                intro: "",
                fail_reason:"",
                warningPwd: "",
                warningEdit: "",
                coverUrl: [],
                pro:[],
                proDetail:[],
                fail_reason:""
            }
        },
        methods: {
            getCoverUrl(data) {
				return this.$store.state.ip + data;
			},
            godetail(_id) {
				this.$router.push({
					path: '/detail/',
					query: {
						_id: _id,
					}
				});
			},
            goedit(_id) {
                this.$router.push({
                    path: '/editPro/',
                    query: {
                        _id: _id,
                    }
                });
            },
            getstar(star) {
				let sum = 0;
				for (let i = 0; i < star.length; i++) {
					sum = sum + star[i].count;
				}
				return Math.ceil(sum / star.length) ? Math.ceil(sum / star.length) : 0;
			},
            validateReset() {
                if (!/^.{6,20}$/.test(this.oldPwd)) {
                    this.warningPwd = '旧密码长度为6-20位'
                    return false;
                }
                if (!/^.{6,20}$/.test(this.newPwd)) {
                    this.warningPwd = '新密码长度为6-20位'
                    return false;
                }
                if (!/^.{6,20}$/.test(this.confirmPwd) || this.newPwd != this.confirmPwd) {
                    this.warningPwd = '密码不一致'
                    return false;
                }
                this.warningPwd = "";
                return true;
                setTimeout(() => {
                    this.warningPwd = "";
                }, 2000);
            },
            validateEdit() {
                if (!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(this.phone)) {
                    this.warningEdit = "请输入有效的手机号码！";
                    return false
                }
                if (!/^.{3,6}$/.test(this.depart)) {
                    this.warningEdit = "请输入正确的系别";
                    return false
                }
                if (!/^.{3,10}$/.test(this.major)) {
                    this.warningEdit = "请输入正确的专业";
                    return false
                }
                if (!/^.{1,100}$/.test(this.intro)) {
                    this.warningEdit = "个性签名输入错误";
                    return false
                }
                this.warningEdit = "";
                return true

            },

            //修改密码
            changePwd() {
                if (this.validateReset()) {
                    this.$store.dispatch({
                        type: "httpMethod",
                        method: "patch",
                        url: "/user/reset/" + this.$store.state.userInfo._id,
                        data: {
                            oldPwd: this.oldPwd,
                            newPwd: this.newPwd
                        },
                        callback: (result) => {
                            if (result.body.status == 'ok') {
                                this.warningPwd = '密码修改成功'

                            }
                            if (result.body.status == 'fail') {
                                this.warningPwd = '密码修改失败'
                            }
                        }
                    })
                }
            },
            


            //修改资料
            changeEdit() {
                if (this.validateEdit()) {
                    this.$store.dispatch({
                        type: "httpMethod",
                        method: "patch",
                        url: "/api/user/" + this.$store.state.userInfo._id,
                        data: {
                            phone: this.phone,
                            depart: this.depart,
                            major: this.major,
                            intro: this.intro
                        },
                        callback: (result) => {
                            if (result.body.status == 'ok') {
                                this.warningEdit = '资料修改成功'
                            }
                            if (result.body.status == 'fail') {
                                this.warningEdit = '资料修改失败'
                            }
                            setTimeout(() => {
                                this.warningEdit = "";
                            }, 1000);
                        }
                    })
                }
            },
            



        }
    }

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import '../../assets/css/user.css';
  
</style>